<template>
  <div :id="id" :style="style" :option="option"/>
</template>
<script>
var echarts = require('echarts')
export default {
  name: 'Chart',
  props: {
    // 父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    option: {
      type: Object,
      // Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      // 使用闭包保证一个vue实例拥有自己的一份props
      default() {
        return {
        
        }
      }
    }
  },
  data() {
    return {
      // echarts实例
      chart: ''
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log(this.option)
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
    }
  }
}
</script>
